<template>
    <vertical-layout>hello, world!!!初步了解一下Vue的基本指令：
        <p>{{ msg }}</p>
        <input v-model="msg">
        <br>
        <span v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
        <p v-if="seen">现在你看到我了</p>

        <div id="app-4">
        <ol>
            <li v-for='num in list' :key="num">{{ num }}</li>
        </ol>
        </div>

        <p>{{text}}</p>
        <button v-on:click="reverseMessage">反转消息</button>

        <!-- ELE分割线组件 -->
        <span>头上一片晴天，心中一个想念</span>
        <el-divider content-position="left">少年包青天</el-divider>
        <span>饿了别叫妈, 叫饿了么</span>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <span>为了无法计算的价值</span>
        <el-divider content-position="right">阿里云</el-divider>
        <!-- END -->
        <div id="app-7">
        <ol>
            <!--
            现在我们为每个 todo-item 提供 todo 对象
            todo 对象是变量，即其内容可以是动态的。
            我们也需要为每个组件提供一个“key”，稍后再
            作详细解释。
            -->
            <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
            ></todo-item>
        </ol>
        </div>
        <!--自定义组件-->
        <v-tip @parentMethods="parentMethods"></v-tip>
    </vertical-layout>
</template>
<script>
// 父组件
import Layout from '@/layout'
import VerticalLayout from '@/layout/VerticalLayout'
import VTip from '@/components/Tips'
export default {
    name: 'Hello',
    data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: ['福田','南山', '龙华', '宝安', '罗湖'],
      seen: true,
      text: '$上 海 自 来 水 来 自 海 上@',
      groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ],
    parentMessages: '我是来自父组件的消息~~~',
    }
  },
  methods: {
    // 消息反转
    reverseMessage: function () {
      this.text = this.text.split('').reverse().join('')
    },
    // 用于给子组件调用的方法（注意：需要在自定义组件上面监听此方法，即@parentMethods='parentMethods'）
    parentMethods: function(params) {
        console.log(params, params.name, params.props)
        alert('你好，父组件方法')
    },
  },
  // 引入自定义组件
  components: {
      VTip,
      Layout,
      VerticalLayout,
  },
  created(){
      
    }
}

import Vue from 'vue'
// 自定义组件todo-item
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

</script>